<template>
	<div>
		<div class="theme-background my-bg"><van-icon name="setting" class="setting" /></div>
		<div class="index-main">
			<div class="corners-div"></div>
			<div style="margin: 0 0.5rem;text-align: center;">
				<van-uploader :after-read="afterRead" class="photo-upload">
					<div class="user-photo">
						<img src="https://img.yzcdn.cn/vant/leaf.jpg" />
						<div class="theme-background icon-box"><van-icon class="iconfont icon-bianji" class-prefix="icon" name="bianji" /></div>
						<div style="margin-top: 0.5rem;">
							<div style="font-size:0.45rem">用户名</div>
							<div style="font-size: 0.4rem;margin-top: 0.1rem;">206666</div>
						</div>
					</div>
				</van-uploader>
				<div class="van-grid" style="    margin-bottom: 0.3rem;">
					<div class="van-grid-item" style="flex-basis: 25%;">
						<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline">
							<svg class="svg-icon" aria-hidden="true"><use xlink:href="#icon-wodedingdan1"></use></svg>
							<span class="van-grid-item__text">我的订单</span>
						</div>
					</div>
					<div class="van-grid-item" style="flex-basis: 25%;">
						<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline">
							<svg class="svg-icon" aria-hidden="true"><use xlink:href="#icon-changyongshebei1"></use></svg>
							<span class="van-grid-item__text">常用设备</span>
						</div>
					</div>

					<div class="van-grid-item" style="flex-basis: 25%;">
						<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline">
							<svg class="svg-icon" aria-hidden="true"><use xlink:href="#icon-changyongxiaoqu"></use></svg>
							<span class="van-grid-item__text">常用小区</span>
						</div>
					</div>
					<div class="van-grid-item" style="flex-basis: 25%;">
						<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline">
							<svg class="svg-icon" aria-hidden="true"><use xlink:href="#icon-guanyuwomen1"></use></svg>
							<span class="van-grid-item__text">关于我们</span>
						</div>
					</div>
				</div>

				<div class="service">
					<div class="title">服务</div>
					<div class="van-grid">
						<div class="van-grid-item" style="flex-basis: 25%;">
							<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline">
								<i class="icon iconfont icon-chongzhijilu"></i>
								<span class="van-grid-item__text">充值记录</span>
							</div>
						</div>
						<div class="van-grid-item" style="flex-basis: 25%;">
							<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline">
								<i class="icon iconfont icon-xiaofeijilu"></i>
								<span class="van-grid-item__text">消费记录</span>
							</div>
						</div>

						<div class="van-grid-item" style="flex-basis: 25%;">
							<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline">
								<i class="icon iconfont icon-baoyuejilu"></i>
								<span class="van-grid-item__text">包月记录</span>
							</div>
						</div>
						<div class="van-grid-item" style="flex-basis: 25%;">
							<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--surround van-hairline">
								<i class="icon iconfont icon-wodexiaoxi"></i>
								<span class="van-grid-item__text">我的消息</span>
							</div>
						</div>
					</div>
				</div>
				<div class="title">活动</div>
				<img src="../../assets/images/activity.png" width="100%" />
			</div>
		</div>
		<w-tabbar @change="onChange"></w-tabbar>
	</div>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		onChange(index) {
		
		},
		afterRead(file) {
			// 此时可以自行将文件上传至服务器
			console.log(file);
		}
	}
};
</script>

<style lang="scss" scoped>
.my-bg {
	height: px2rem(180);
	.setting {
		position: absolute;
		color: #fff;
		font-size: px2rem(18);
		right: px2rem(15);
		top: px2rem(40);
	}
}
.index-main {
	position: relative;
	padding-bottom: 3rem;
}

.van-grid-item__content {
	background: none;
	.van-grid-item__text {
		color: #2d4564;
		margin-top: px2rem(5);
	}
	.icon {
		color: #1989fa;
		font-size: px2rem(20);
	}
}
.van-grid-item__content::after {
	border-width: 0;
}
.title {
	text-indent: 0.5rem;
	padding: 0.3rem 0;
	text-align: left;
	font-size: px2rem(15);
}
.van-hairline--top::after {
	border-color: #e6eaf0;
}
.corners-div {
	height: 0.8rem;
	position: absolute;
	top: px2rem(-14);
	left: 0;
	right: 0;
	background: #f3f7fe;
	border-radius: 156px;
}
.svg-icon {
	width: 1.5rem;
	height: 1.5rem;
	vertical-align: -0.15rem;
	fill: currentColor;
	overflow: hidden;
}
.service {
	padding: 0.3rem 0;
	border-bottom: 1px solid #e6eaf0;
	border-top: 1px solid #e6eaf0;
}
.photo-upload {
	text-align: center;
	margin: 0 auto;
	top: px2rem(-80);
	.user-photo {
		width: px2rem(120);
		height: px2rem(120);
		position: relative;
		img {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
		.icon-box {
			border: 2px solid #fff;
			border-radius: 50%;
			width: px2rem(26);
			height: px2rem(26);
			position: absolute;
			right: px2rem(13);
			bottom: 0;
			.icon-bianji {
				color: #fff;
				font-size: px2rem(13);
				vertical-align: super;
			}
		}
	}
}
</style>
